<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="author" content="94hi.tw">
    <meta name="copyright" content="Copyright (c) 94hi.tw">
    <meta name="description" content="94hi.tw就是嗨！">
    <meta name="keywords" content="94hi,94hi.tw,94hi.tw就是嗨！">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="MobileOptimized" content="320">
    <meta name="format-detection" content="telephone=no, address=no, email=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <title>遊戲預購：各專案頁_購買頁</title>
    <link rel="stylesheet" href="../assets/css/core.css">
    <link rel="stylesheet" href="../assets/css/ui-form.css">
    <link rel="stylesheet" href="../assets/css/ui-dialog.css">
    <link rel="stylesheet" href="../assets/css/ui-pager.css">
    <link rel="stylesheet" href="../assets/css/preorder.css">
</head>
<body>
    <header>
        <div class="header">
            <h1 class="logo">
                <a href="../index.html">94hi.tw就是嗨！</a>
            </h1>

            <ul class="nav">
                <li>
                    <a href="../index.html">首頁</a>
                </li>
                <li class="current">
                    <a href="../preorder.html">遊戲預購</a>
                </li>
                <li>
                    <a href="../games/all.html">遊戲大廳</a>
                </li>
                <li>
                    <a href="../member.html">會員中心</a>
                </li>
                <li>
                    <a href="../purchase/platform/step1.html">購點儲值</a>
                </li>
                <li>
                    <a href="../cs/help.html">客戶服務</a>
                </li>
            </ul>

            <div class="user">
                <!-- 未登入 -->
                <div class="user-unlogin">
                    <a href="../login/password.html">登入</a>
                    <a href="../join/phone.html">註冊</a>
                </div>

                <!-- 已登入 -->
                <!-- <div class="user-logined" id="j-user-logined">
                    <a href="javascript:;" class="user-name">漲帳戶姓名</a>

                    <ul class="user-menu">
                        <li>咪曉那</li>
                        <li>
                            <a href="">我的帳號</a>
                        </li>
                        <li>
                            <a href="">會員任務</a>
                        </li>
                        <li>
                            <a href="">會員月卡</a>
                        </li>
                        <li>
                            <a href="">會員季卡</a>
                        </li>
                        <li>
                            <a href="">切換會員帳號</a>
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>

        <div class="page-header">
            <div class="page-header-con con">
                <h2 class="page-title">遊戲預購</h2>

                <ul class="page-nav">
                    <li class="current">
                        <a href="../preorder.html">ALL</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <main>
        <div class="main preorder">
            <section class="preorder-detail preorder-con con con-bg">
                <div class="preorder-detail-hd">
                    <aside>
                        <i class="preorder-pic" style="background-image: url(../assets/images/pic-1.jpg);"></i>
                    </aside>
                    <main>
                        <h3 class="preorder-title">Crimson Desert 赤血沙漠｜2019 G-Star 正式揭露，旗艦級 MMORPG</h3>
                        <h4 class="preorder-producer">開發商：Abys</h4>

                        <div class="preorder-meta">
                            <p>
                                <strong>NT$ 10,258,300</strong>
                                目標：11,000.000
                            </p>
                            <p>
                                <strong>1,003</strong>
                                人預購
                            </p>
                            <p>
                                <strong>32</strong>
                                天結束
                            </p>
                        </div>

                        <div class="preorder-menu">
                            <div class="preorder-share">
                                <a href="" class="facebook">分享</a>
                                <a href="" class="line">分享</a>
                            </div>
                        </div>
                    </main>
                </div>

                <div class="preorder-detail-bd">
                    <div class="preorder-time-progress">
                        <p class="time">遊戲預購於 2019/11/23 14:00 開始</p>
                        <!--
                            completed 進度100% 樣式
                         -->
                        <div class="preorder-progress">
                            <i style="width: 50%;">
                                <!-- <span>兄弟，我們成功了！</span> -->
                                <span>已達成 50%，衝阿！</span>
                            </i>
                        </div>
                    </div>

                    <div class="preorder-buy">
                        <aside>
                            <div class="preorder-product-item">
                                <div class="item-hd">
                                    <strong class="product-money">NT$ 3,999</strong>
                                </div>
                                <div class="item-bd">
                                    <h4 class="product-title">天長地久包年包不是白獅包也不是白痴包</h4>
                                    <div class="preorder-product-tag">
                                        <b>1,000 人預購</b>
                                        <!--
                                            red 限時樣式
                                            orange 限量樣式
                                         -->
                                        <b class="orange">限量</b>
                                    </div>
                                    <p class="product-desc">
                                        ● 條列式預購商品內容<br>
                                        ● 條列式預購商品內容<br>
                                        ● 條列式預購商品內容<br>
                                        ● 條列式預購商品內容
                                    </p>
                                </div>
                                <div class="item-ft">限量預購 1,000 份</div>
                            </div>
                        </aside>
                        <main>
                            <form action="" class="preorder-buy-form ui-form" id="preorderBuy">
                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd">
                                        <label for="" class="ui-form-label">購買數量</label>
                                    </div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-input">
                                            <input type="number" name="" id="" value="1" required>
                                        </div>
                                        <div class="ui-form-item-msg">
                                            本次購買數量上限 10
                                        </div>
                                    </div>
                                </section>

                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd">
                                        <label for="" class="ui-form-label">付款金額</label>
                                    </div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-input">
                                            <input type="text" name="" id="" value="NT$ 3,999" readonly required>
                                        </div>
                                        <div class="ui-form-item-msg">請確認您的付款金額</div>
                                    </div>
                                </section>

                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd">
                                        <label for="" class="ui-form-label">預購人</label>
                                    </div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-input">
                                            <input type="text" name="" id="" placeholder="請輸入您的真實姓名"  required>
                                        </div>
                                        <div class="ui-form-item-msg valid">
                                            √ 已填寫
                                        </div>
                                    </div>
                                </section>

                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd">
                                        <label for="" class="ui-form-label">聯絡 Email</label>
                                    </div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-input">
                                            <input type="email" name="" id="" placeholder="請輸入聯絡 Email"  required>
                                        </div>
                                        <div class="ui-form-item-msg valid">
                                            √ 帳戶格式正確
                                        </div>
                                    </div>
                                </section>

                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd">
                                        <label for="" class="ui-form-label">聯絡 Email</label>
                                    </div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-item-row">
                                            <div class="preorder-buy-areacode ui-form-select">
                                                <select name="areaCode" id="loginPhoneAreaCode">
                                                    <option value="+886 台灣" selected>+886 台灣</option>
                                                </select>
                                            </div>

                                            <div class="ui-form-input auto ml10">
                                                <input type="tel" name="" id="" placeholder="請輸入完整手機號碼 ex.0911222333" required>
                                            </div>
                                        </div>

                                        <div class="ui-form-item-msg valid">
                                            √ 手機號碼格式正確
                                        </div>
                                    </div>
                                </section>

                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd">
                                        <label for="" class="ui-form-label">付款方式</label>
                                    </div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-select">
                                            <select name="" id="" required>
                                                <option value="" selected>請選擇付款方式</option>
                                                <option value="1">信用卡</option>
                                                <option value="2">ATM</option>
                                                <option value="3">網路 ATM</option>
                                                <option value="4">平台點數</option>
                                            </select>
                                        </div>
                                        <div class="ui-form-item-msg invalid">× 請選擇付款方式</div>
                                    </div>
                                </section>

                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd">
                                        <label for="" class="ui-form-label">發票資訊</label>
                                    </div>

                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-select">
                                            <select name="" id="" required>
                                                <option value="1">捐贈發票</option>
                                                <option value="2">使用會員載具</option>
                                                <option value="3">三聯式電子發票</option>
                                            </select>
                                        </div>
                                        <div class="ui-form-item-msg valid">
                                            <!-- <p>√ 您的發票將捐贈給：顯示捐贈單位名稱</p> -->
                                        </div>
                                    </div>
                                </section>

                                <!-- 選擇 三聯式電子發票 後 顯示-->
                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd"></div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-input">
                                            <input type="text" name="" id="" placeholder="請輸入發票抬頭" required>
                                        </div>
                                        <div class="ui-form-item-msg invalid">
                                            <!-- <p>× 請輸入正確資訊</p> -->
                                        </div>
                                    </div>
                                </section>
                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd"></div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-input">
                                            <input type="text" name="" id="" placeholder="請輸入統一編號" required>
                                        </div>
                                        <div class="ui-form-item-msg valid">
                                            <!-- <p>√ 已輸入資訊</p> -->
                                        </div>
                                    </div>
                                </section>
                                <!-- end -->

                                <!-- 選擇 使用會員載具 或 三聯式電子發票 顯示 -->
                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd"></div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-input">
                                            <input type="email" name="" id="" placeholder="請輸入聯絡 Email" required>
                                        </div>
                                        <div class="ui-form-item-msg valid">
                                            <!-- <p>√ Email 格式正確</p> -->
                                        </div>
                                    </div>
                                </section>
                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd"></div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-input">
                                            <input type="tel" name="" id="" placeholder="請輸入聯絡手機號碼（僅接受台灣門號）" required>
                                        </div>
                                        <div class="ui-form-item-msg invalid">
                                            <!-- <p>× 手機號碼格式錯誤</p> -->
                                        </div>
                                    </div>
                                </section>
                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd"></div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-checkbox">
                                            <div class="checkbox-item">
                                                <input type="checkbox" name="isStorage" id="isStorageInfo" value="1" checked>
                                                <label for="isStorageInfo">儲存我的資訊以便下次使用</label>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                <!-- end -->

                                <section class="ui-form-row ui-form-item">
                                    <div class="ui-form-item-hd">
                                        <label for="" class="ui-form-label">支持預購</label>
                                    </div>
                                    <div class="ui-form-item-bd">
                                        <div class="ui-form-textarea">
                                            <textarea name="" id="" rows="8" placeholder="若您支持本遊戲預購，請留言讓我們知道（字數限制 ***）"></textarea>
                                        </div>
                                    </div>
                                </section>

                                <section class="ui-form-row ui-form-button">
                                    <a href="product.html" class="ui-button white prev">上一步</a>
                                    <button type="submit">確認購買</button>
                                </section>
                            </form>
                        </main>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <footer>
        <section class="footer">
            <div class="footer-con">
                <h2 class="footer-logo">94hi.tw就是嗨！</h2>

                <ul class="footer-nav">
                    <li>
                        <a href="../about.html">關於我們</a>
                    </li>
                    <li>
                        <a href="../contract.html">會員條款</a>
                    </li>
                    <li>
                        <a href="../privacy.html">隱私權政策</a>
                    </li>
                    <li>
                        <a href="../regulation.html">遊戲管理規章</a>
                    </li>
                    <li>
                        <a href="../contact.html">商務接洽</a>
                    </li>
                </ul>
            </div>
        </section>

        <section class="copyright">
            <div class="copyright-con">
                <p class="copyright-content">紅番茄愛娛樂股份有限公司 ©2020 Happy Tomato All Rights Reserved</p>

                <ul class="contact">
                    <li>
                        <a href="" class="line">line</a>
                    </li>
                    <li>
                        <a href="" class="facebook">facebook</a>
                    </li>
                </ul>
            </div>
        </section>
    </footer>
</body>
</html>
